<!--
  * 项目信息表
  *
  * @Author:    yurui
  * @Date:      2024-07-01 16:39:11
  * @Copyright  shjz
-->
<template>
  <a-drawer :title="form.id ? '编辑' : '添加'" width="800" :open="visibleFlag" @close="onClose" :maskClosable="false" :destroyOnClose="true">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
      <a-row>
        <a-col :span="12">
          <a-form-item label="项目名称" name="projectName">
            <a-input style="width: 250px" v-model:value="form.projectName" placeholder="项目名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="立项日期" name="approveDate">
            <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.approveDate" style="width: 250px" placeholder="立项日期" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="文件表id" name="fileId">
            <a-input-number style="width: 250px" v-model:value="form.fileId" placeholder="文件表id" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="合同金额" name="contractAmount">
            <a-input-number style="width: 250px" v-model:value="form.contractAmount" placeholder="合同金额" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="客户名称" name="customerName">
            <a-input style="width: 250px" v-model:value="form.customerName" placeholder="客户名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目负责人id" name="projectLeaderId">
            <DictSelect width="200px" v-model:value="form.projectLeaderId" keyCode="" placeholder="项目负责人id" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计划开工日期" name="planStartDate">
            <a-date-picker
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              v-model:value="form.planStartDate"
              style="width: 250px"
              placeholder="计划开工日期"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计划竣工日期" name="planEndDate">
            <a-date-picker
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              v-model:value="form.planEndDate"
              style="width: 250px"
              placeholder="计划竣工日期"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="施工地址" name="address">
            <a-textarea style="width: 250px" v-model:value="form.address" placeholder="施工地址" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目概述" name="description">
            <a-textarea style="width: 100%" v-model:value="form.description" placeholder="项目概述" />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- <div style="width: 750px;height: 350px; border: 1px solid #d9d9d9; border-radius: 5px; margin-top: 20px;">

     <a-button style="margin: 10px 8px 0 8px;"><RedoOutlined /></a-button>
     
     <a-button style="margin: 10px 8px 0 0;" type="primary">新增</a-button>
     
     <a-button style="margin: 10px 8px 0 0;">保存</a-button>

  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>

          <a-divider type="vertical" />

          <a>Delete</a>

          <a-divider type="vertical" />

          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table> -->
      <!-- </div> -->
    </a-form>
     <!-- 新添table表格 -->
    
    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
<script setup>
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import { reactive, ref, nextTick } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { projectApi } from '/@/api/business/project/project-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import DictSelect from '/@/components/support/dict-select/index.vue';
  // 新增弹框里面的table表格
 

// const subData = ref([
//   { linNo:'123456', barCode:'1111111111',name:'余锐',standard:'2222',color:'red',unit:'公司',number:'333'}
// ])

  // ------- 事件------------------------
  /* 新增子件行 */
  
   //删除对应行
  

    // 子数据保存(通过this.$refs.modalBomForm调用子页面弹出)
    

                           
                        

  const emits = defineEmits(['reloadList']);
  // ----------显示与隐藏 -----
  // 是否显示
  const visibleFlag = ref(false);

  function show(rowData) {
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }
    visibleFlag.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }
  // -------表单 ----------
  // 组件ref
  const formRef = ref();

  const formDefault = {
    id: undefined,
    projectName: undefined, //项目名称
    approveDate: undefined, //立项日期
    fileId: undefined, //文件表id（连表t_file取file_id、file_name）
    contractAmount: undefined, //合同金额
    customerName: undefined, //客户名称
    projectLeaderId: undefined, //项目负责人id
    planStartDate: undefined, //计划开工日期
    planEndDate: undefined, //计划竣工日期
    address: undefined, //施工地址
    description: undefined, //项目概述
  };

  let form = reactive({ ...formDefault });

  const rules = {
    projectName: [{ required: true, message: '项目名称 必填' }],
    approveDate: [{ required: true, message: '立项日期 必填' }],
    fileId: [{ required: true, message: '文件表id 必填' }],
    contractAmount: [{ required: true, message: '合同金额 必填' }],
    customerName: [{ required: true, message: '客户名称 必填' }],
    projectLeaderId: [{ required: true, message: '项目负责人id 必填' }],
    planStartDate: [{ required: true, message: '计划开工日期 必填' }],
    planEndDate: [{ required: true, message: '计划竣工日期 必填' }],
  };
  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {
      if (form.id) {
        await projectApi.update(form);
      } else {
        await projectApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
</script>
